<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.NumericStepper.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.NumericStepper.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.NumericStepper.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@fileOverview&nbsp;Text&nbsp;Input의&nbsp;숫자&nbsp;값을&nbsp;증감&nbsp;버튼을&nbsp;클릭(Click)이나&nbsp;마우스&nbsp;휠(Wheel)&nbsp;동작으로&nbsp;증감&nbsp;시킬&nbsp;수&nbsp;있는&nbsp;컴포넌트
	@version&nbsp;#__VERSION__#
**/
/**
	Text&nbsp;Input의&nbsp;숫자&nbsp;값을&nbsp;+/-&nbsp;버튼&nbsp;클릭이나&nbsp;마우스&nbsp;휠동작으로&nbsp;증감시킬&nbsp;수&nbsp;있는&nbsp;컴포넌트
	
	@class&nbsp;jindo.NumericStepper
	@extends&nbsp;jindo.UIComponent
	@keyword&nbsp;numericstepper,&nbsp;stepper,&nbsp;number,&nbsp;증감,&nbsp;숫자,&nbsp;뉴메릭스테퍼,&nbsp;스테퍼
**/
jindo.NumericStepper&nbsp;=&nbsp;jindo.$Class({
	/**&nbsp;@lends&nbsp;jindo.NumericStepper.prototype&nbsp;*/
		
	_bIsOnFocus&nbsp;:&nbsp;false,&nbsp;//&nbsp;Input&nbsp;Box에&nbsp;focus&nbsp;여부
	/**
		NumericStepper&nbsp;컴포넌트를&nbsp;초기화한다.
		
		@constructor
		@param&nbsp;{HTMLElement}&nbsp;el&nbsp;베이스(기준)&nbsp;엘리먼트
		@param&nbsp;{Object}&nbsp;[htOption]&nbsp;옵션&nbsp;객체
			@param&nbsp;{String}&nbsp;[htOption.sClassPrefix=&quot;ns-&quot;]&nbsp;클래스명&nbsp;접두어
			@param&nbsp;{Boolean}&nbsp;[htOption.bActivateOnload=true]&nbsp;로드시&nbsp;컴포넌트&nbsp;활성화여부
			@param&nbsp;{Boolean}&nbsp;[htOption.bUseMouseWheel=false]&nbsp;마우스&nbsp;휠&nbsp;사용&nbsp;여부
			@param&nbsp;{Number}&nbsp;[htOption.nStep=1]&nbsp;증감(+/-)이&nbsp;일어나는&nbsp;단
			@param&nbsp;{Number}&nbsp;[htOption.nDecimalPoint=0]&nbsp;소수점&nbsp;몇째자리까지&nbsp;표현할&nbsp;것인지&nbsp;지정
			@param&nbsp;{Number}&nbsp;[htOption.nMin=-Infinity]&nbsp;최소값
			@param&nbsp;{Number}&nbsp;[htOption.nMax=Infinity]&nbsp;최대값
			@param&nbsp;{Number}&nbsp;[htOption.nDefaultValue=0]&nbsp;Input&nbsp;Element에&nbsp;표시&nbsp;될&nbsp;기본&nbsp;값
			@param&nbsp;{Boolean}&nbsp;[htOption.bInputReadOnly=true]&nbsp;Input&nbsp;element가&nbsp;직접입력&nbsp;불가능한지&nbsp;여부
		@example
			//&nbsp;HTML
			&lt;div&nbsp;id=&quot;number_stepper&quot;&gt;&nbsp;&lt;!--&nbsp;기준&nbsp;엘리먼트&nbsp;--&gt;
				&lt;h4&gt;0~10까지의&nbsp;값만&nbsp;선택가능&nbsp;(1단위)&lt;/h4&gt;
				&lt;input&nbsp;type=&quot;text&quot;&nbsp;class=&quot;ns-input&quot;&nbsp;/&gt;&nbsp;&lt;!--&nbsp;input[type=text]&nbsp;(필수)&nbsp;--&gt;
				&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;ns-plus&quot;&gt;+&lt;/button&gt;&nbsp;&lt;!--&nbsp;증가&nbsp;버튼&nbsp;(필수)&nbsp;--&gt;
				&lt;button&nbsp;type=&quot;button&quot;&nbsp;class=&quot;ns-minus&quot;&gt;-&lt;/button&gt;&nbsp;&lt;!--&nbsp;감소&nbsp;버튼&nbsp;(필수)&nbsp;--&gt;
			&lt;/div&gt;
			
			//&nbsp;JavaScript
			//include&nbsp;jindo.Componenet.js
			//include&nbsp;jindo.UIComponent.js
			//include&nbsp;jindo.NumericStepper.js
			&nbsp;
			//0~10까지의&nbsp;값을&nbsp;1단위로&nbsp;선택&nbsp;가능한&nbsp;NumericStepper&nbsp;를&nbsp;생성한다.
			var&nbsp;oNumericStepper&nbsp;=&nbsp;new&nbsp;jindo.NumericStepper(&quot;number_stepper&quot;,{
				sClassPrefix&nbsp;:&nbsp;&#39;ns-&#39;,
				nStep&nbsp;:&nbsp;1,
				nMin&nbsp;:&nbsp;0,
				nMax&nbsp;:&nbsp;10,
				nDefaultValue&nbsp;:&nbsp;0
	});
	**/
	$init&nbsp;:&nbsp;function(el,&nbsp;htOption)&nbsp;{
		this._el&nbsp;=&nbsp;jindo.$(el);&nbsp;//Base&nbsp;엘리먼트&nbsp;설정
		
		this.option({
			sClassPrefix&nbsp;:&nbsp;&#39;ns-&#39;,&nbsp;	//&nbsp;(String)&nbsp;Class&nbsp;Prefix
			bActivateOnload&nbsp;:&nbsp;true,&nbsp;//&nbsp;(Boolean)&nbsp;로드시&nbsp;컴포넌트&nbsp;활성화여부
			bUseMouseWheel&nbsp;:&nbsp;false,	//&nbsp;(Boolean)&nbsp;마우스&nbsp;휠&nbsp;사용&nbsp;여부
			nStep&nbsp;:&nbsp;1,				//&nbsp;(Number)&nbsp;가감(+/-)이&nbsp;&nbsp;일어나는&nbsp;단위
			nDecimalPoint&nbsp;:&nbsp;0,		//&nbsp;(Number)&nbsp;소수점&nbsp;몇째자리까지&nbsp;표현할&nbsp;것인지&nbsp;지정
			nMin&nbsp;:&nbsp;-Infinity,		//&nbsp;(Number)&nbsp;최소값	
			nMax&nbsp;:&nbsp;Infinity,		//&nbsp;(Number)&nbsp;최대값
			nDefaultValue&nbsp;:&nbsp;0,&nbsp;		//&nbsp;(Number)&nbsp;Text&nbsp;Input에&nbsp;디폴트로&nbsp;지정될&nbsp;값
			bInputReadOnly&nbsp;:&nbsp;true	//&nbsp;(Boolean)&nbsp;Text&nbsp;Input에&nbsp;직접입력&nbsp;불가능하도록&nbsp;지정
		});
		this.option(htOption&nbsp;||&nbsp;{});
		
		this._assignHTMLElements();&nbsp;//컴포넌트에서&nbsp;사용되는&nbsp;HTMLElement들을&nbsp;선언하는&nbsp;메서드
		this._wfPlusClick&nbsp;=&nbsp;jindo.$Fn(this._onPlusClick,&nbsp;this);
		this._wfMinusClick&nbsp;=&nbsp;jindo.$Fn(this._onMinusClick,&nbsp;this);
		this._wfWheel&nbsp;=&nbsp;jindo.$Fn(this._onWheel,&nbsp;this);
		this._wfFocus&nbsp;=&nbsp;jindo.$Fn(this._onFocus,&nbsp;this);
		this._wfBlur&nbsp;=&nbsp;jindo.$Fn(this._onBlur,&nbsp;this);
		
		if(this.option(&quot;bActivateOnload&quot;))&nbsp;{
			this.activate();	
		}
	},

	/**
		컴포넌트에서&nbsp;사용되는&nbsp;HTMLElement들을&nbsp;선언하는&nbsp;메서드
		@ignore
	**/
	_assignHTMLElements&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;sPrefix&nbsp;=&nbsp;this.option(&quot;sClassPrefix&quot;);
		this._elInput&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;&nbsp;+&nbsp;sPrefix&nbsp;+&nbsp;&quot;input&quot;,this._el);
		this._elPlusButton&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;&nbsp;+&nbsp;sPrefix&nbsp;+&nbsp;&quot;plus&quot;,this._el);
		this._elMinusButton&nbsp;=&nbsp;jindo.$$.getSingle(&quot;.&quot;&nbsp;+&nbsp;sPrefix&nbsp;+&nbsp;&quot;minus&quot;,this._el);
	},
	
	/**
		입력창의&nbsp;값을&nbsp;기본값으로&nbsp;리셋&nbsp;시킨다.
		
		@method&nbsp;reset
	**/
	reset&nbsp;:&nbsp;function()&nbsp;{
		this._elInput.value&nbsp;=&nbsp;this.option(&quot;nDefaultValue&quot;).toFixed(this.option(&quot;nDecimalPoint&quot;));
	},
	
	/**
		지정된&nbsp;숫자&nbsp;값을&nbsp;가져온다.
		
		@method&nbsp;getValue
		@return&nbsp;{Number}&nbsp;
	**/
	getValue&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;parseFloat(this._elInput.value);
	},
	
	/**
		숫자&nbsp;값을&nbsp;설정한다.
		
		@method&nbsp;setValue
		
		@history&nbsp;1.3.0&nbsp;Bug&nbsp;잘못된&nbsp;범위의&nbsp;값을&nbsp;지정&nbsp;했을&nbsp;때&nbsp;change&nbsp;이벤트가&nbsp;발생하지&nbsp;않는&nbsp;문제&nbsp;수정&nbsp;
	**/
	setValue&nbsp;:&nbsp;function(n)&nbsp;{
		if&nbsp;(typeof&nbsp;n&nbsp;!==&nbsp;&quot;number&quot;)&nbsp;{
			n&nbsp;=&nbsp;this.option(&quot;nDefaultValue&quot;);
		}
		
		//&nbsp;n&nbsp;=&nbsp;n.toFixed(this.option(&quot;nDecimalPoint&quot;));
		var&nbsp;nMin&nbsp;=&nbsp;this.option(&quot;nMin&quot;),
			nMax&nbsp;=&nbsp;this.option(&quot;nMax&quot;),
			htParam&nbsp;=&nbsp;{
				&quot;nValue&quot;&nbsp;:&nbsp;n,
				&quot;nMin&quot;&nbsp;:&nbsp;nMin,&nbsp;
				&quot;nMax&quot;&nbsp;:&nbsp;nMax
			};
		
		/**
			&nbsp;값이&nbsp;바뀌기&nbsp;직전에&nbsp;발생
			
			@event&nbsp;beforeChange
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{Number}&nbsp;nValue&nbsp;변경하려&nbsp;한&nbsp;값
			@param&nbsp;{Number}&nbsp;nMin&nbsp;옵션에서&nbsp;정의한&nbsp;최소값
			@param&nbsp;{Number}&nbsp;nMax&nbsp;옵션에서&nbsp;정의한&nbsp;최대값
			@param&nbsp;{Function}&nbsp;stop&nbsp;실행시&nbsp;값이&nbsp;변경되지&nbsp;않는다
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oNumericStepper.attach(&quot;beforeChange&quot;,&nbsp;function(oCustomEvent)&nbsp;{
					alert(oCustomEvent.nValue);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//변경되려한&nbsp;값
					alert(oCustomEvent.nMin);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//옵션에서&nbsp;정의한&nbsp;최소값
					alert(oCustomEvent.nMax);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//옵션에서&nbsp;정의한&nbsp;최대값
				});
		**/
		if(!this.fireEvent(&quot;beforeChange&quot;,&nbsp;htParam)){
			return;
		}
		
		if&nbsp;(htParam.nValue&nbsp;&gt;&nbsp;nMax&nbsp;||&nbsp;htParam.nValue&nbsp;&lt;&nbsp;nMin){
			/**
				지정된&nbsp;최소/최대값을&nbsp;초과할때&nbsp;발생
				
				@event&nbsp;overLimit
				@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
				@param&nbsp;{Number}&nbsp;nValue&nbsp;변경하려&nbsp;한&nbsp;값
				@param&nbsp;{Number}&nbsp;nMin&nbsp;옵션에서&nbsp;정의한&nbsp;최소값
				@param&nbsp;{Number}&nbsp;nMax&nbsp;옵션에서&nbsp;정의한&nbsp;최대값
				@example
					//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
					oNumericStepper.attach(&quot;overLimit&quot;,&nbsp;function(oCustomEvent)&nbsp;{
						alert(oCustomEvent.nValue);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//변경하려한&nbsp;값
						alert(oCustomEvent.nMin);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//옵션에서&nbsp;정의한&nbsp;최소값
						alert(oCustomEvent.nMax);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//옵션에서&nbsp;정의한&nbsp;최대값
					});
			**/
			this.fireEvent(&quot;overLimit&quot;,&nbsp;htParam);
			htParam.nValue&nbsp;=&nbsp;Math.max(nMin,&nbsp;Math.min(nMax,&nbsp;htParam.nValue));
		}
		
		this._elInput.value&nbsp;=&nbsp;htParam.nValue.toFixed(this.option(&quot;nDecimalPoint&quot;));
		
		/**
			&nbsp;값이&nbsp;바뀌고&nbsp;난&nbsp;뒤&nbsp;발생
			
			@event&nbsp;change
			@param&nbsp;{String}&nbsp;sType&nbsp;커스텀&nbsp;이벤트명
			@param&nbsp;{Number}&nbsp;nValue&nbsp;변경하려&nbsp;한&nbsp;값
			@param&nbsp;{Number}&nbsp;nMin&nbsp;옵션에서&nbsp;정의한&nbsp;최소값
			@param&nbsp;{Number}&nbsp;nMax&nbsp;옵션에서&nbsp;정의한&nbsp;최대값
			@example
				//&nbsp;커스텀&nbsp;이벤트&nbsp;핸들링&nbsp;예제
				oNumericStepper.attach(&quot;change&quot;,&nbsp;function(oCustomEvent)&nbsp;{
					alert(oCustomEvent.nValue);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//변경하려한&nbsp;값
					alert(oCustomEvent.nMin);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//옵션에서&nbsp;정의한&nbsp;최소값
					alert(oCustomEvent.nMax);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//옵션에서&nbsp;정의한&nbsp;최대값
				});
		**/
		this.fireEvent(&quot;change&quot;,&nbsp;htParam);
	},
	
	/**
		컴포넌트의&nbsp;베이스&nbsp;엘리먼트를&nbsp;가져온다.
		
		@method&nbsp;getBaseElement
		@return&nbsp;{HTMLElement}
	**/
	getBaseElement&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._el;
	},
	
	/**
		컴포넌트의&nbsp;Input&nbsp;엘리먼트를&nbsp;가져온다.
		
		@method&nbsp;getInputElement
		@return&nbsp;{HTMLElement}
	**/
	getInputElement&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._elInput;
	},
	
	/**
		컴포넌트의&nbsp;Plus&nbsp;버튼&nbsp;엘리먼트를&nbsp;가져온다.
		
		@method&nbsp;getPlusElement
		@return&nbsp;{HTMLElement}
	**/
	getPlusElement&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._elPlusButton;
	},
	
	/**
		컴포넌트의&nbsp;Minus&nbsp;버튼&nbsp;엘리먼트를&nbsp;가져온다.
		
		@method&nbsp;getMinusElement
		@return&nbsp;{HTMLElement}
	**/
	getMinusElement&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._elMinusButton;
	},
	
	/**
		Text&nbsp;Input의&nbsp;focus여부를&nbsp;가져온다.
		
		@method&nbsp;isFocused
		@return&nbsp;{Boolean}
	**/
	isFocused&nbsp;:&nbsp;function()&nbsp;{
		return&nbsp;this._bIsOnFocus;
	},
	
	_onActivate&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;elInput&nbsp;=&nbsp;this.getInputElement();
		this._wfPlusClick.attach(this.getPlusElement(),&nbsp;&quot;click&quot;);
		this._wfMinusClick.attach(this.getMinusElement(),&nbsp;&quot;click&quot;);
		this._wfFocus.attach(elInput,&nbsp;&quot;focus&quot;);
		this._wfBlur.attach(elInput,&nbsp;&quot;blur&quot;);
		
		if&nbsp;(this.option(&quot;bUseMouseWheel&quot;))&nbsp;{
			this._wfWheel.attach(elInput,&nbsp;&quot;mousewheel&quot;);
		}
		
		this._elInput.readOnly&nbsp;=&nbsp;this.option(&quot;bInputReadOnly&quot;);
		this.reset();
	},
	
	_onDeactivate&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;elInput&nbsp;=&nbsp;this.getInputElement();
		this._wfPlusClick.detach(this.getPlusElement(),&nbsp;&quot;click&quot;);
		this._wfMinusClick.detach(this.getMinusElement(),&nbsp;&quot;click&quot;);
		this._wfFocus.detach(elInput,&nbsp;&quot;focus&quot;);
		this._wfBlur.detach(elInput,&nbsp;&quot;blur&quot;);
		this._wfWheel.detach(elInput,&nbsp;&quot;mousewheel&quot;);	
	},

	_onMinusClick&nbsp;:&nbsp;function(we)&nbsp;{
		this.setValue(this.getValue()&nbsp;-&nbsp;this.option(&quot;nStep&quot;));
	},
	
	_onPlusClick&nbsp;:&nbsp;function(we)&nbsp;{
		this.setValue(this.getValue()&nbsp;+&nbsp;this.option(&quot;nStep&quot;));
	},
	
	_onWheel&nbsp;:&nbsp;function(we)&nbsp;{
		if(this.isFocused()){
			we.stop(jindo.$Event.CANCEL_DEFAULT);
			if(&nbsp;we.mouse().delta&nbsp;&gt;&nbsp;0)&nbsp;{
				this._onPlusClick();
			}&nbsp;else&nbsp;{
				this._onMinusClick();
			}
		}
	},
	
	_onFocus&nbsp;:&nbsp;function(we)&nbsp;{
		this._bIsOnFocus&nbsp;=&nbsp;true;
	},
	
	_onBlur&nbsp;:&nbsp;function(we)&nbsp;{
		this._bIsOnFocus&nbsp;=&nbsp;false;
		this.setValue(this.getValue());
		this._elInput.readOnly&nbsp;=&nbsp;this.option(&quot;bInputReadOnly&quot;);
	}
}).extend(jindo.UIComponent);	</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>